<template>
  <div>
    <TableBar :columns="columns" :layout="layout">
      <div slot="top">
        <el-form label-width="120px" :model="searchMap">
          <el-row :gutter="20">
            <el-col :xs="19" :sm="12" :lg="7">
              <el-form-item label="投入品名称：">
                <el-select
                  v-model="searchMap.supplyName"
                  placeholder="请选择投入品"
                >
                  <el-option
                    v-for="item in supplylist"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="19" :sm="12" :lg="7">
              <el-form-item label="sku编号：">
                <el-input v-model="searchMap.skuNumber"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="19" :sm="12" :lg="7">
              <el-form-item label="基地：">
                <el-select
                  v-auth="'basics_enterprise_select'"
                  v-model="searchMap.baseId"
                  placeholder="请选择基地"
                  @change="selectEvent"
                >
                  <el-option
                    v-for="item in baseInfoList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="19" :sm="12" :lg="7">
              <el-form-item label="供应商：">
                <el-select
                  v-model="searchMap.supplierName"
                  placeholder="请选择供应商"
                >
                  <el-option
                    v-for="item in supplierlist"
                    :key="item.id"
                    :label="item.supplierName"
                    :value="item.supplierName"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="19" :sm="12" :lg="7">
              <el-form-item label="开始时间：">
                <el-date-picker
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  v-model="searchMap.startTime"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="19" :sm="12" :lg="7">
              <el-form-item label="结束时间：">
                <el-date-picker
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  v-model="searchMap.endTime"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="19" :sm="12" :lg="7">
              <el-form-item label="操作人：">
                <el-select v-model="searchMap.operator" placeholder="请选择">
                  <el-option
                    v-for="item in staffInfo"
                    :key="item.id"
                    :label="item.username"
                    :value="item.username"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row style="margin-bottom: 5px">
          <el-col :span="3" :offset="21"
            ><el-button size="small" type="primary" @click="fuzzyQuery"
              >搜索</el-button
            >
            <el-button size="small" @click="resetSerch">重置</el-button></el-col
          >
        </el-row>
      </div>
      <el-row slot="bottom" :gutter="10" type="flex">
        <!-- <el-col :span="7"
          ><el-button
            type="danger"
            size="small"
            plain
            @click="dialogVisible = true"
            >新增</el-button
          ></el-col
        > -->
        <el-col :span="7"
          ><el-tooltip
            effect="dark"
            content="导入投入品入库信息"
            placement="top-start"
            ><el-upload
              action="http://120.77.156.205:9603/breed/supply/in/record/excel/add"
              :show-file-list="false"
              ><el-button
                type="primary"
                class="el-icon-upload el-icon--right"
                size="small"
                @click="getTableInfo"
                >信息导入</el-button
              ></el-upload
            ></el-tooltip
          ></el-col
        >
        <el-col :span="7"
          ><download-excel
            :data="tableData"
            name="投入品信息"
            :fields="json_fields"
            ><el-button type="primary" size="small" @click="downLoadExcel"
              >下载</el-button
            ></download-excel
          ></el-col
        >
        <el-col :span="7">
          <el-tooltip effect="dark" content="批量删除供应商">
            <el-button
              v-auth="'breed_input_access_delete'"
              type="danger"
              size="small"
              :disabled="this.selectList <= 0"
              @click="removeBatch"
              class="el-icon-delete-solid"
            ></el-button
          ></el-tooltip>
        </el-col>
        <el-col>
          <el-select
            size="small"
            v-model="value"
            placeholder="请选择基地"
            @change="changeEvent"
          >
            <el-option
              v-for="item in baseInfoList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </TableBar>
    <Table
      :columns="columns"
      :showPage="showPage"
      ref="tableRef"
      :page.sync="page"
      :data="tableData"
      @changeSize="changeSize"
      @changePage="changePage"
      @selectData="selectData"
      @select-all-event="selectAllEvent"
    >
      <div
        v-for="(item, index) in columns"
        :key="index"
        class="item"
        effect="dark"
        placement="top-start"
      >
        <el-table-column
          type="selection"
          v-if="index === 1"
          effect="dark"
          align="left"
          placement="top-start"
          class="item"
        >
        </el-table-column>
        <el-table-column
          :label="item.name"
          v-if="item.show"
          :prop="item.prop"
          show-overflow-tooltip
        ></el-table-column>
      </div>
      <el-table-column label="操作" width="125" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="mini"
            class="el-icon-delete"
            @click="removeOne(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </Table>
    <el-dialog
      title="新增入库信息"
      :visible.sync="dialogVisible"
      @close="closeEvent"
      width="30%"
    >
      <el-form
        :model="addInfo"
        ref="formRef"
        label-width="110px"
        :rules="rules"
      >
        <el-form-item label="投入品" prop="supplyName">
          <el-select v-model="addInfo.supplyName" @change="selectEvent">
            <el-option
              v-for="(item, index) in supplylist"
              :key="item.id"
              :label="item.name"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入库数量" prop="amount">
          <el-input-number
            v-model="addInfo.amount"
            :min="0"
            controls-position="right"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="入库质量" prop="weight">
          <el-input-number
            v-model="addInfo.weight"
            :min="0"
            controls-position="right"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="SKU编号" prop="skuNumber">
          <el-input v-model="addInfo.skuNumber"></el-input>
        </el-form-item>
        <el-form-item label="供应商" prop="supplierName">
          <el-input v-model="addInfo.supplierName"></el-input>
        </el-form-item>
        <el-form-item label="投入品类型" prop="type">
          <el-input v-model="addInfo.type"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addEvent">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Table from "../../common/TheTable";
import { mapState, mapActions } from "vuex";
import {
  getSupplyInfoBypage, //分页查询企业投入品入库记录
  removeBatch,
  remove,
  addSupply,
  getSupplBaseInfoBypage, //分页查询某个基地投入品入库记录
} from "../../../Api/productionmanage/warehousing_information";
import { vagueSearchSupplyIn } from "../../../Api/productionmanage/index";
export default {
  components: {
    Table,
  },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      columns: [
        { name: "供应商", show: true, prop: "supplierName" },
        { name: "SKU编号", show: true, prop: "skuNumber" },
        { name: "基地名称", show: true, prop: "baseName" },
        { name: "饲料名称", show: true, prop: "supplyName" },
        { name: "投入品类型", show: false, prop: "type" },
        { name: "购买量", show: false, prop: "amount" },
        { name: "购买质量", show: false, prop: "weight" },
        { name: "操作人", show: false, prop: "operator" },
        { name: "购买时间", show: false, prop: "purchaseTime" },
      ],
      value: "",
      layout: "search, refresh, column",
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      showPage: true, // 显示分页
      //所选择的入库信息
      selectList: [],
      selectedData: [],
      isSelectAll: false,
      addInfo: {
        baseId: 1,
        amount: 0,
        weight: 0,
      },
      editInfo: {},
      isSearchMap: false,
      searchMap: {
        skuNumber: null,
        supplyName: null,
        supplierName: null,
        operator: null,
        baseId: null,
        startTime: null,
        endTime: null,
      },
      json_fields: {
        出库ID: {
          field: "id",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        投入品ID: {
          field: "supplyId",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        投入品名称: "supplyName",
        基地名称: "baseName",
        投入品类型: "type",
        SKU编号: "skuNumber",
        出库日期: "deliveryTime",
        数量: "amount",
        重量: "weight",
        操作人: "operator",
        购买时间: "purchaseTime",
      },
    };
  },
  computed: {
    ...mapState({
      supplylist: (state) => state.productionInfo.ShopSupplyInfo, //获取商家投入品信息
      rules: (state) => state.productionInfo.rules,
      baseInfoList: (state) => state.productionInfo.baseInfoList,
      supplierlist: (state) => state.productionInfo.suppliersList, //获取商家信息
      staffInfo: (state) => state.roleInfo.staffInfo,
    }),
  },
  watch: {},
  created() {
    this.getTableInfo();
    this.initdata();
  },
  methods: {
    ...mapActions("productionInfo", [
      "getSupplyInfo", // -> this.getSupplyInfo()
    ]),
    // 初次获取
    initdata() {
      //如果vuex中的info为空的话 那么就调用方法请求数据 如果不为空就不必再发起请求 减少发起请求的次数
      if (this.supplylist.length === 0) {
        // 从vuex异步获取投入品数据
        this.getSupplyInfo();
      }
    },
    downLoadExcel() {
      if (!this.isSelectAll) {
        this.selectedData = [];
        this.selectList.map((v) => {
          this.tableData.map((i) => {
            if (i.id === v) {
              this.selectedData.push(i);
            }
          });
        });
        return;
      }
      let name = "投入品入库信息";
      let path = `http://120.77.156.205:9603/breed/supply/in/record/excel/download?fileName=${name}`;
      window.open = path;
    },
    selectAllEvent() {
      this.isSelectAll = true;
    },
    changeColumn() {},
    // 获取入库数据
    async getTableInfo() {
      const { data: res } = await getSupplyInfoBypage(
        this.page.pageSize,
        this.page.current
      );
      console.log(res);
      if (res.statusCode === 20000) {
        this.tableData = res.data.records;
        this.page.total = res.data.total;
      }
    },
    changePage(page) {
      this.page.current = page.current;
      if (this.isSearchMap) {
        this.fuzzyQuery();
      }
      if (this.value) {
        this.changeEvent();
        return;
      }
      this.getTableInfo();
    },
    // 分页 改变每页显示的条数
    changeSize(size) {
      console.log(size);
      this.page.pageSize = size.pageSize;
      if (this.isSearchMap) {
        this.fuzzyQuery();
      }
      if (this.value) {
        this.changeEvent();
        return;
      }
      this.getTableInfo();
    },
    //单个删除
    async removeOne(id) {
      const confirmResuly = await this.$confirm(
        "此操作将永久删除所选出库信息, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResuly !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await remove(id);
      console.log(res);
      if (res.statusCode === 20000) {
        this.$message.success("删除成功");
        this.getTableInfo();
      }
    },
    //批量删除
    async removeBatch() {
      const confirmResuly = await this.$confirm(
        "此操作将永久删除所选入库信息, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResuly !== "confirm") {
        return this.$message.info("已取消删除");
      }
      console.log("11");
      console.log(this.selectList);
      const { data: res } = await removeBatch(this.selectList);
      console.log(res);
      if (res.statusCode === 20000) {
        this.$message.success("删除成功");
        this.getTableInfo();
      }
    },
    //获取所要删除的入库ID
    selectData(list) {
      this.selectList.push(
        list.map((list) => {
          return list.id;
        })
      );
    },
    closeEvent() {
      this.$refs.formRef.resetFields();
    },
    async addEvent() {
      let temp = this.$refs.formRef.validate((valid) => {
        if (!valid) {
          this.$message.info("请按要求填写");
        } else {
          console.log(this.addInfo);
        }
      });
      console.log(temp);
      const { data: res } = await addSupply(this.addInfo);
      console.log(res);
      if (res.statusCode === 20000) {
        this.$message.success("投入品入库成功");
        this.getTableInfo();
        this.dialogVisible = false;
      }
    },
    editEvent(row) {
      this.editInfo = row;
    },
    selectEvent(num) {
      console.log(this.supplylist[num]);
      this.addInfo.skuNumber = this.supplylist[num].skuNumber;
      this.addInfo.supplyId = this.supplylist[num].id;
      this.addInfo.type = this.supplylist[num].type;
      this.addInfo.supplierName = this.supplylist[num].supplierName;
      this.addInfo.supplyName = this.supplylist[num].name;
    },
    async changeEvent(id) {
      const { data: res } = await getSupplBaseInfoBypage(
        id,
        this.page.pageSize,
        this.page.current
      );
      console.log(res);
      this.tableData = res.data.records;
      this.page.total = res.data.total;
    },
    async fuzzyQuery() {
      console.log(this.searchMap);
      let obj = {};
      // 将用户想要模糊查询的属性写入对象
      for (let key in this.searchMap) {
        if (this.searchMap[key]) {
          obj[key] = this.searchMap[key];
        }
      }
      console.log(obj);
      const { data: res } = await vagueSearchSupplyIn(
        obj,
        this.pageSize,
        this.page.current
      );
      console.log(res);
      this.isSearchMap = true;
      this.tableData = res.data.records;
      this.page.total = res.data.total;
    },
    resetSerch() {
      this.isSearchMap = false;
      for (let key in this.searchMap) {
        this.searchMap[key] = '';
      }
      this.getTableInfo();
    },
  },
};
</script>

<style>
</style>
   
